<template>
  <div class="settlement-details">
    <el-dialog
      title="结算详情"
      center
      :visible.sync="isShow"
      width="82%"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <!--  -->
      <el-table
        :data="tableData"
        show-summary
        :summary-method="getSummaries"
        border
        @sort-change="tableSortChange"
        v-loading="loading">
        <el-table-column
          property="order_number"
          show-overflow-tooltip
          label="订单编号"
          min-width="200"
          align="left"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          property="settlement_price"
          show-overflow-tooltip
          label="结算金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          property="settlement_type"
          show-overflow-tooltip
          label="结算类型"
          min-width="150"
          align="left"
          sortable="custom"
        ></el-table-column>
        <el-table-column
          property="reward_price"
          show-overflow-tooltip
          label="奖励金额(元)"
          min-width="150"
          align="left"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span class="font_success">{{ scope.row.reward_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="reward_explain"
          show-overflow-tooltip
          label="奖励说明"
          min-width="150"
          align="left"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.reward_explain && scope.row.reward_explain.length > 0">
              <el-button
                type="text"
                class="view-btn"
                icon="el-icon-view"
                @click="lookCaption(scope.row.reward_explain, 'reward')"
              >查看说明</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="deduction_price"
          show-overflow-tooltip
          label="扣除金额(元)"
          min-width="140"
          align="left"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span class="font_danger">{{ scope.row.deduction_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          property="deduction_explain"
          show-overflow-tooltip
          label="扣款说明"
          min-width="140"
          align="left"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.deduction_explain  && scope.row.deduction_explain.length > 0 ">
              <el-button
                type="text"
                class="view-btn"
                icon="el-icon-view"
                @click="lookCaption(scope.row.deduction_explain, 'deduction')"
              >查看说明</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          property="total"
          show-overflow-tooltip
          label="合计(元)"
          min-width="120"
          align="right"
          sortable="custom"
        ></el-table-column>
        <!-- <el-table-column label="操作" fixed="right" align="left">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="edit(scope.row)">修改</el-button>
          </template>
        </el-table-column>-->
        <!-- <div style="text-align: center" slot='append'>

        </div>-->
      </el-table>
      <lookCaption ref="lookCaption" @refresh="getData" />
      <editDetails ref="editDetails" @refresh="getData" />
    </el-dialog>
  </div>
</template>

<script>
import lookCaption from "./lookCaptionDialog";
import editDetails from "./edit-details";
export default {
  components: {
    lookCaption,
    editDetails
  },
  data() {
    return {
      tableData: [],
      isShow: false,
      loading: false,
      agentId: null,
      finalId: null,
      allTotal: 0,
      sort_params: {}
    };
  },
  methods: {
    async show(id) {
      this.isShow = true;
      this.agentId = id;
      await this.getData();
    },
    getData(args) {
      let params = {
        agent_id: this.agentId
      }
      if (args) {
        params= {...params, ...args}
      }
      this.loading = true
      this.$axios
        .get("/api/settlement/settlement_statistics_details", {params:params})
        .then(res => {
          if (res.data.code == 200) {
            if (res.data.data.length == 0) {
              this.loading = false
              this.$message({
                type: "error",
                message: "暂无结算明细"
              })
              return;
            }
            this.allTotal = res.data.allTotal;
            // let appendSum = {
            //   order_number: "小计",
            //   total: this.allTotal
            // };
            // res.data.data.push(appendSum);
            this.tableData = res.data.data;
            this.loading = false
          } else {
            this.loading = false
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
    },
    edit(data) {
      let obj = {
        agent_id: this.agentId,
        finals_id: data.final_id,
        order_id: data.order_id,
        settlement_id: data.settlement_id,
        total: data.total
      };
      this.$refs["editDetails"].show(obj);
    },
    refresh() {
      this.$emit("refresh");
      this.getInfo();
    },
    closeDialog() {
      this.tableData = [];
      // this.show = false;
    },
    lookCaption(data, where) {
      this.$refs["lookCaption"].show(data, where);
    },
    // 表尾合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "小计";
          return;
        }
        if (column.label === "合计(元)") {
          console.log(column.label);
          console.log(this.allTotal);
          sums[index] = this.allTotal;
        }
      });

      return sums;
    },
    tableSortChange(column) {
      let params= {
        sort_str: column.prop
      };
      if (column.order == "ascending") {
        params.sort_order = "asc";
      } else if (column.order == "descending") {
        params.sort_order = "desc";
      } else {
        params = {};
      }
      this.getData(params);
    }
  }
};
</script>

<style lang='less' type='text/css'>
.settlement-details {
  .el-table {
    .el-table__body {
      tbody {
        tr:last-child {
          // td {
          //   background-color: #f5f7fa;
          //   color: #606266;
          //   font-weight: 700;
          // }
          td:first-child {
            div {
            }
          }
        }
      }
    }
    .el-table__footer-wrapper {
      .el-table__footer {
        div {
          font-weight: 700;
        }
      }
    }
  }
  .view-btn {
    padding: 0;
    span {
      font-size: 12px;
    }
    i {
      font-size: 15px;
    }
  }
}
</style>
